
<template>
  <div>
    <div id="more_chart" ref="more_chart"></div>
    <div id="theta_chart" ref="theta_chart"></div>
    <div id="flower_chart" ref="flower_chart"></div>
    <div id="earth_chart" ref="earth_chart"></div>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      moreOption: {
        title: {
          text: "堆叠区域图",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "邮件营销",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "联盟广告",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "视频广告",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "直接访问",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "搜索引擎",
            type: "line",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "top",
              },
            },
            areaStyle: {},
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      },
      thetaOption: {
        title: {
          text: "极坐标双数值轴",
        },
        legend: {
          data: ["line"],
        },
        polar: {},
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        angleAxis: {
          type: "value",
          startAngle: 0,
        },
        radiusAxis: {},
        series: [
          {
            coordinateSystem: "polar",
            name: "line",
            type: "line",
            data: [],
          },
        ],
      },
      flowerOption: {
        title: {
          text: "极坐标双数值轴",
        },
        legend: {
          data: ["line"],
        },
        polar: {
          center: ["50%", "54%"],
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        angleAxis: {
          type: "value",
          startAngle: 0,
        },
        radiusAxis: {
          min: 0,
        },
        series: [
          {
            coordinateSystem: "polar",
            name: "line",
            type: "line",
            showSymbol: false,
            data: [],
          },
        ],
        animationDuration: 2000,
      },
      earthOption: {
        tooltip: {},
        visualMap: {
          show: false,
          dimension: 2,
          min: -1,
          max: 1,
          inRange: {
            color: [
              "#313695",
              "#4575b4",
              "#74add1",
              "#abd9e9",
              "#e0f3f8",
              "#ffffbf",
              "#fee090",
              "#fdae61",
              "#f46d43",
              "#d73027",
              "#a50026",
            ],
          },
        },
        xAxis3D: {},
        yAxis3D: {},
        zAxis3D: {},
        grid3D: {},
        series: [
          {
            type: "surface",
            parametric: true,
            // shading: 'albedo',
            parametricEquation: {
              u: {
                min: -Math.PI,
                max: Math.PI,
                step: Math.PI / 20,
              },
              v: {
                min: 0,
                max: Math.PI,
                step: Math.PI / 20,
              },
              x: function (u, v) {
                return Math.sin(v) * Math.sin(u);
              },
              y: function (u, v) {
                return Math.sin(v) * Math.cos(u);
              },
              z: function (u, v) {
                return Math.cos(v);
              },
            },
          },
        ],
      },
    };
  },
  methods: {
    lineChart() {
      let myChart = this.$echarts.init(this.$refs.more_chart);

      myChart.setOption(this.moreOption);
    },
    mapMsg() {
      for (var i = 0; i <= 100; i++) {
        var theta = (i / 100) * 360;
        var r = 5 * (1 + Math.sin((theta / 180) * Math.PI));
        this.thetaOption.series[0].data.push([r, theta]);
      }
    },
    thetaChart() {
      let myChart = this.$echarts.init(this.$refs.theta_chart);
      this.mapMsg();
      myChart.setOption(this.thetaOption);
    },
    mapFlower() {
      for (var i = 0; i <= 360; i++) {
        var t = (i / 180) * Math.PI;
        var r = Math.sin(2 * t) * Math.cos(2 * t);
        this.flowerOption.series[0].data.push([r, i]);
      }
    },
    flowerChart() {
      let myChart = this.$echarts.init(this.$refs.flower_chart);
      this.mapFlower();
      myChart.setOption(this.flowerOption);
    },
    earthChart() {
      let myChart = this.$echarts.init(this.$refs.earth_chart);
      myChart.setOption(this.earthOption);
    },
  },
  mounted() {
    this.lineChart();
    this.thetaChart();
    this.flowerChart();
    this.earthChart();
  },
  updated() {},
};
</script>
​
<style scoped>
#more_chart {
  height: 300px;
  width: 800px;
}
#theta_chart {
  height: 300px;
  width: 800px;
}
#flower_chart {
  height: 300px;
  width: 800px;
}
#earth_chart {
  height: 400px;
  width: 800px;
}
</style>